<template>
    <div class="page-box">

         <div class="page-search">
            <div>
                <label>单据查询</label>
                <el-input v-model="searchForm.Number" style="width: 160px;"></el-input>
            </div>

            <div>
                <label>客户名称</label>
                <el-select v-model="searchForm.CustomerNumber" style="width: 160px;" placeholder="请选择客户">
                    <el-option v-for="Client in ClientList" :key="Client.CustomerNumber" :label="Client.ClientName" :value="Client.Id"></el-option>
                </el-select>
            </div>

            <div>
                <label>出库仓</label>
                <el-input v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择出库仓" filterable>>
                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName" :value="Warehouse.Id"></el-option>
                </el-input>
            </div>

            
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>

        </div>


        <div class="page-section">
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                 <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="Number" label="销售单编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerName" label="客户名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WarehouseName" label="出货仓"  :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Transfer" label="运输方式" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="订单状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="Number(scope.row.Status) === 0">待审核</el-tag>
                        <el-tag type="success"  v-else-if="Number(scope.row.Status) === 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="Number(scope.row.Status) === 2">已出库</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="CreateTime" label="出库日期" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>


                <el-table-column label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="Checked(scope.row)">选择</el-button>
                    </template>
                </el-table-column>

            </el-table>


            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
        </div>


    </div>
</template>
<script>


import Pagination from '@/components/Pagination.vue';
export default {
    props: {
        BomList: {
            type: Array,
            required: true
        }
    },
    components: {
        Pagination
    },
    mounted() {
        this.dataBind();
    },
    data() {
        return {
            //客户
            ClientList:[],
            //仓库
            WarehouseList: [],

            //搜索字段
            searchForm: {
                Number: '',
                WarehouseId: '',
                CustomerNumber: '',
                Status: '1',
            },

            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false


        }
    },
    created(){
        this.GetOrderReturnSelectData();
    },
    methods: {
        Checked(model) {

            this.$http.get('/api/OrderSale/GetOrderSaleId', {
                params: {
                    OrderSaleId: model.Id,
                    WarehouseId: model.WarehouseId
                }
            })
            .then(res => {
                var isCallback = true;
                try {
                    res.Data.forEach(x=>{
                        if(x.CurrCount< x.Count){
                            isCallback=false;
                            throw  `当前商品【${x.ItemName}】库存不足以出库，库存数量：${x.CurrCount}，出库数量：${x.Count}`
                        }
                    })
                } catch (error) {
                    this.showNotify(error);
                }
                finally{
                    if(isCallback)
                        this.$emit('callback',model,res.Data);
                }
            })

            
        }, 

        //搜索
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        //重置
        reset() {
            this.searchForm.PersonCode = '';
            this.searchForm.UserName = '';
        },

        //获取数据
        dataBind() {
            this.isLoading = true
            this.$http.get('/api/OrderSale', {
                params: {
                    PageIndex: this.pageDomain.PageIndex,
                    PageSize: this.pageDomain.PageSize,
                    Number: this.searchForm.Number,
                    WarehouseId: this.searchForm.WarehouseId,
                    CustomerNumber: this.searchForm.CustomerNumber,
                    Status: this.searchForm.Status
                }
            })
                .then(res => {
                    this.tableData = res.Data
                    this.pageDomain.TotalCount = res.Count
                    this.isLoading = false
                })
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },




          GetOrderReturnSelectData(){
            this.$http.get('./api/Integrated/GetOrderReturnSelectData')
            .then(res => {
                console.log(res.Data);
                this.ClientList = res.Data.ClientList;
                this.WarehouseList = res.Data.WarehouseList;
            })
        },

    }
}
</script>